<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Drop-down menu</title>
	<script language="JavaScript">
		function showElement(id)
		{
			document.getElementById(id).style.display = "block";
		}
		function hideElement(id)
		{
			document.getElementById(id).style.display = "none";
		}
	</script>
	
	<style type="text/css">
		body
		{
			font-family: tahoma;
			color: #ff0000;
		}
		
		div
		{
			display: none;
			position: absolute;
			top: 40px;
			font-size: 18px;
			text-decpration: underline;
			border: 3px solid #000000;
			background-color: #ffff00;
			width: 75px;
		}
		
		#item1
		{
			left: 17px;
		}
		#item2
		{
			left: 110px;
		}
		
		#mainMenu
		{
			cell-spacing: 4px;
			border: none;
		}
		
		.mainMenuItem
		{
			background-color: #00ffff;
			border: #0000ff 3px solid;
			border-size: 2;
			font-size: 20px;
		}
	</style>
</head>

<body>
	<table id="mainMenu">
		<tr>
			<td class="mainMenuItem" onmouseover="showElement('item1')" onmouseout="hideElement('item1')">Block one
				<div id="item1">
					Yahoo<br />
					Yahoo<br />
					Yahoo<br />
					Close
				</div>
			</td>
			<td class="mainMenuItem" onmouseover="showElement('item2')" onmouseout="hideElement('item2')">Block two
				<div id="item2">
					Yahoo<br />
					Yahoo<br />
					Yahoo<br />
					Close
				</div>
			</td>
		</tr>
	</table>
</body>
</html>